📋 React Hook Form 기본 개념 정리

"폼 입력값을 React state에 모두 저장하지 않고도, 효율적으로 값 추적·검증·에러 처리를 할 수 있게 해주는 라이브러리"

React Hook Form은 가장 적은 리렌더링과 간단한 API 제공을 목표로 합니다.

1️⃣ React Hook Form이란?

"폼 값을 React state로 게속 들고 있지 않아도 되며, 최소한의 렌더링으로 폼을 관리할 수 있도록 도와주는 라이브러리"

즉, React의 re-render 비용을 줄이면서도 검증/에러 처리/값 추적/폼 제출 흐름을 간단한 API로 제공합니다.

2️⃣ 기존 폼 관리의 문제점

일반적인 React 폼은 state를 통해 input을 제어합니다.

const [value, setValue] = useState("");

<input value={value} onChange={(e) => setValue(e.target.value)} />;

❗ 문제점

• 입력(타이핑)할 때마다 컴포넌트 전체가 리렌더링됨
• 큰 폼이나 복잡한 UI에서는 성능 문제가 발생
• validation 코드를 직접 관리해야 하므로 복잡함

React Hook Form은 이런 비효율을 피하기 위해 uncontroller 기반으로 동작합니다.

3️⃣ React Hook Form의 핵심 훅: useForm

const {
    register,
    handleSubmit,
    formState: { errors },
    control
} = useForm();

🔹 각 API 역할

• register

  input을 React Hook Form에 연결하는 함수 → ref 기반이라 input의 변화를 자체적으로 추적합니다.

• handleSubmit

  제출 시 데이터 수집 + validation 실행 + 성공/실패 콜백 진행

• errors

  각 필드의 validation 에러 정보

• control

  Controlled 컴포넌트 (MUI·Chakra·커스텀 UI 등)와 연결할 때 사용 (Controller에서 사용 )

4️⃣ 기본 사용 예시

const { register, handleSubmit, formState: { errors } } = useForm();

const onSubmit = (data) => {
  console.log(data);
};

return (
  <form onSubmit={handleSubmit(onSubmit)}>
    <input
      {...register("email", { required: "이메일은 필수입니다" })}
    />
    {errors.email && <span>{errors.email.message}</span>}

    <button type="submit">제출</button>
  </form>
);

⚙️ 동작 방식

• input의 값은 state로 관리하지 않아도 됩니다.
• 입력 시 리렌더링 발생하지 않습니다.
• 제출할 때 한 번에 data가 모입니다.
• 에러 메시지는 formState에서 자동으로 관리됩니다.

5️⃣ React Hook Form이 빠른 이유

React Hook Form은 다음 전략을 사용합니다.

🔹 Uncontrolled Input 기반

DOM이 input 값을 직접 관리 → React 렌더링 영향 ❌

🔹 ref로 input을 등록

register() 호출 시 input을 Form System에 연결하고, 값 변화를 알아서 추적합니다.

🔹 필요한 곳만 리렌더링

• 에러 UI

• watched value를 사용하는 곳

  등 일부만 렌더링되고, 전체 폼이 다시 그려지지 않습니다.

6️⃣ validation 처리 방식

React Hook Form은 3가지 방법을 지원합니다.

🔹 등록 시 rule 선언

register("email", { required: "필수 입력" })

🔹 커스텀 validation

register("age", {
  validate: value => value > 19 || "성인은 20세부터입니다",
});

🔹 resolver로 schema 기반 validation

또는 yup, zod처럼 schema validator 연동

const schema = z.object({
  email: z.string().email(),
});

useForm({ resolver: zodResolver(schema) });

7️⃣ 언제 React Hook Form을 사용해야 하나?

🔹 큰 폼에서 렌더링 비용이 커질 때

• 회원가입
• 설정 페이지
• 대용량 입력 폼

🔹 validation 흐름을 간단하게 구성하고 싶을 때

🔹 FormState를 일관적으로 관리하고 싶을 때

• 에러, dirty, touched 등 상태를 hook으로 얻을 수 있음

🔹 React Hook Form의 장점이 특히 드러날 때

• 큰 폼
• 복잡한 폼 상태
• 퍼포먼스 요구되는 UI

8️⃣ React Hook Form의 장점 & 단점